<template>
  <div>
    <h1>待办事项</h1>
    <input type="text" v-model="newTodo" @keyup.enter="addTodo" placeholder="添加新的待办事项" />
    <ul>
      <li v-for="(item, index) in todos" :key="index">
        <input type="checkbox" v-model="item.completed" class="completed" />
        <span v-if="item.completed" class="completed">{{ item.text }}</span>
        <span v-else>{{ item.text }}</span>
        <button @click="removeTodo(index)">删除</button>
      </li>
    </ul>
    <button @click="removeCompletedTodos">删除已完成的待办事项</button>
  </div>
</template>
<script>
export default {

  data() {
    return {
      newTodo: '',
      todos: []
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim() !== '') {
        this.todos.push({ text: this.newTodo, completed: false })
        this.newTodo = ''
      }
    },
    removeTodo(index) {
      this.todos.splice(index, 1)
    },
    removeCompletedTodos() {
      this.todos = this.todos.filter(todo => !todo.completed)
    }
  }
}
</script>
<style scoped>
@import url('@/assets/css/helloworld.css');
</style>
